<template>
  <div>
    <van-row type="flex" justify="center" v-if="bet.betting_bull_bear" class="betList" >
        <van-col span="10">
          <div  @click="toBetdetail(bet.id)">
            <van-tag color="#f2826a" size="medium">猜</van-tag>
            <strong> {{bet.bet_asset.symbol}}</strong>
            <span class="dew">{{bet.pay_asset.symbol}}</span>
            <div class="date">{{bet.betting_bull_bear.period}}</div>
          </div>
        </van-col>
        <van-col span="5">
          <div  @click="toBetdetail(bet.id)">
          <div class="upMessage">
            <van-tag color="mediumseagreen" round style="padding: 3px 3px;">涨</van-tag>
            <strong class="font-up-down">{{bet.betting_bull_bear.bullish.toFixed(3)}}</strong>
            <img src="../../assets/images/home/uparrow.png" style="height: 12px;width: 10px">
          </div>
          <van-tag color="red" round style="padding: 3px 3px;">跌</van-tag>
          <strong class="font-up-down">{{bet.betting_bull_bear.bearish.toFixed(3)}}</strong>
          <img src="../../assets/images/home/downarrow.png" style="height: 12px;width: 10px">
          </div>
        </van-col>
        <van-col span="5"><div class="guess-rise" @click="toBetdetail(bet.id)">
          <p>猜涨</p>
          <p>{{parseInt(bet.betting_bull_bear.bull_total/bet.quantity_per_hand)}} 张</p>
        </div></van-col>
        <van-col span="5"><div class="guess-fall" @click="toBetdetail(bet.id)">
          <p>猜跌</p>
          <p>{{parseInt(bet.betting_bull_bear.bear_total/bet.quantity_per_hand)}} 张</p>
        </div></van-col>
    </van-row>
  </div>
</template>

<script>
import { Grid, GridItem, Row, Col, Tabs, Tag, Button } from 'vant'
export default {
  name: 'card-bet',
  props: ['bet'],
  components: {
    [Grid.name]: Grid,
    [GridItem.name]: GridItem,
    [Row.name]: Row,
    [Col.name]: Col,
    [Tabs.name]: Tabs,
    [Tag.name]: Tag,
    [Button.name]: Button
  },
  data () {
    return {
    }
  },
  methods: {
    toBetdetail (id) {
      this.$router.push({ name: 'bet', params: { 'betId': id } })
      console.log(id)
    }
  }
}
</script>

<style lang="less">
  .betList{
    padding: 15px 10px;
    border-bottom: solid 1px #E1E4EB;
    strong{
      font-size: 20px;
      margin-right: 3px;
    }
    .dew{
      font-size: 12px;
      color: #ffa700;
      background-color: #80808014;
      padding: 1px 2px;
    }
    .date{
      padding-top: 8px ;
      color: darkgrey;
      font-size: 12px;
    }
    .upMessage{
      padding-bottom: 10px;
    }
    .font-up-down{
      font-size: 10px;
      padding: 2px;
    }
    .guess-rise{
      background-color: limegreen;
      height: 100%;
      text-align: center;
      margin-left: 5px;
      text-overflow:ellipsis;
      p:first-child{
        color: white;
        padding-top: 5px;
      }
      p:last-child{
        padding: 5px;
        font-size: 13px;
      }
    }
    .guess-fall{
      background-color: red;
      height: 100%;
      text-align: center;
      margin-left: 5px;
      text-overflow:ellipsis;
      p:first-child{
        color: white;
        padding-top: 5px;
      }
      p:last-child{
        padding: 5px;
        font-size: 13px;
      }
    }
  }
</style>
